<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ko">
<head>
<title>기본 예제</title>
<meta name="class-lists" content="jindo.ModalDialog"/>
<meta name="screenshots" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="description" content="버튼을 클릭하여 모달창을 띄우는 예제입니다.">
<link rel="stylesheet" type="text/css" href="../asset/demo.css">
<style type="text/css">
	.dialog-fog { position:absolute; left:0; top:0; padding:0; margin:0; border:0; width:100px; height:100px; background-color:#111; opacity:0; }
	.dialog-layer { display:none; background:#FFFFFF none repeat scroll 0 0; border:2px solid #777777; position:absolute; z-index:2; width:200px; height:200px; }
	.dialog-close { position:absolute; right:10px; top:10px; }
	.dialog2-layer { display:none; background:#EEE none repeat scroll 0 0; border:3px solid #777777; position:absolute; z-index:2; width:300px; height:110px; }
</style>
</head>
<body>
<script type="text/javascript" src="../asset/demojs/demo.js#header"
     data-title="Jindo Component"
     data-subtitle="=document.title"
     data-backbutton="false"
     data-viewsource="false"
     data-qrcode="true"></script>
	
<div class="demo">
	<button type="button" id="layer1">모달 창 보기 </button>
</div>

<script type="text/javascript" charset="utf-8" src="../../asset/jindo.desktop.all.ns.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Component.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Timer.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Effect.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Transition.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Foggy.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.LayerPosition.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.Dialog.js"></script>
<script type="text/javascript" charset="utf-8" src="../../source/jindo.ModalDialog.js"></script>
<script type="text/javascript">
	var oModalDialog = new jindo.ModalDialog({
		Foggy : { //Foggy 컴포넌트를 위한 옵션 (jindo.Foggy 참고)
			nShowDuration : 150, //(Number) fog 레이어가 완전히 나타나기까지의 시간 (ms)  
			nShowOpacity : 0.8, //(Number) fog 레이어가 보여질 때의 transition 효과와 투명도 (0~1사이의 값)      
			nHideDuration : 150, //(Number) fog 레이어가 완전히 사라지기까지의 시간 (ms)  
			nHideOpacity : 0, //(Number) fog 레이어가 숨겨질 때의 transition 효과와 투명도 (0~1사이의 값)
			sEffect : "linear", // (String) jindo.Effect의 종류  
			nFPS : 30 //(Number) 효과가 재생될 초당 frame rate  
		}
	}).attach({
		beforeShow : function(e) {
			//console.log(e.type)
			//다이얼로그 레이어가 보여지기 전에 발생
			//전달되는 이벤트 객체 e = {
			//	elLayer (HTMLElement) 다이얼로그 레이어
			//}
			//e.stop(); 수행시 보여지지 않음
		},
		show : function(e) {
			//console.log(e.type)
			//다이얼로그 레이어가 보여진 후 발생
			//전달되는 이벤트 객체 e = {
			//	elLayer (HTMLElement) 다이얼로그 레이어
			//}
		},
		beforeHide : function(e) {
			//console.log(e.type)
			//다이얼로그 레이어가 숨겨지기 전에 발생
			//전달되는 이벤트 객체 e = {
			//	elLayer (HTMLElement) 다이얼로그 레이어
			//}
			//e.stop(); 수행시 숨겨지지 않음
		},
		hide : function(e) {
			//console.log(e.type)
			//다이얼로그 레이어가 숨겨진 후 발생
			//전달되는 이벤트 객체 e = {
			//	elLayer (HTMLElement) 다이얼로그 레이어
			//}
		}
	});
	
	var aDialogTemplate = [];
	aDialogTemplate.push('<div>');
	aDialogTemplate.push('	<a href="#" class="dialog-close">');
	aDialogTemplate.push('		<img width="15" height="14" alt="레이어닫기" src="http://static.naver.com/common/btn/btn_close2.gif"/>');
	aDialogTemplate.push('	</a>');
	aDialogTemplate.push('</div>');
	aDialogTemplate.push('<div style="position:absolute;top:30px;margin:10px;width:170px">{=text}</div>');
	aDialogTemplate.push('	<div style="position:absolute;bottom:10px;right:10px;">');
	aDialogTemplate.push('		<button type="button" class="dialog-confirm">확인</button>');
	aDialogTemplate.push('		<button type="button" class="dialog-cancel">취소</button>');
	aDialogTemplate.push('	</div>');
	aDialogTemplate.push('</div>')
	oModalDialog.setLayerTemplate(aDialogTemplate.join("\n"));
	
	jindo.$Fn(function(){
		oModalDialog.show({ text : "확인, 취소, 닫기 버튼을 클릭하기 전까지 다이얼로그 외부가 가려집니다." }, {
			close : function(e) {
				//console.log(e);
			},
			cancel : function(e) {
				//console.log(e);
			},
			confirm : function(e) {
				//console.log(e);
			}
		});	
	}).attach(jindo.$("layer1"), "click");
</script>
<script type="text/javascript" src="../asset/demojs/demo.js#footer"></script>
</body>
</html>
